<template>
	<view class="complaint-pages">
		<view class="info-block">
			<view class="form-item">
				<view class="form-name">投诉类型</view>
				<view class="form-crl">{{info.typeStr}}</view>
			</view>
			<view class="form-item">
				<view class="form-crl1">{{info.complaints}}</view>
			</view>
			<view class="form-item" v-if="info.files">
				<view class="form-name">文件</view>
				<view class="img-block">
					<view class="img-item" v-for="(item,index) in imgList" :key="index">
						<video v-if="item.includes('.mp4')" :src="item" class="img"></video>
						<image mode="aspectFit" :src="cloudStorage + item" @click="previewImg(item)" v-else class="img">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFrontDataTableByIdApi
	} from '@/api/home.js'
	export default {
		data() {
			return {
				info: {
					typeStr: '',
					complaints: '',
					files: ''
				},
				imgList: []
			}
		},
		methods: {
			// 预览图片
			previewImg(url) {
				uni.previewImage({
					urls: this.imgList.filter(item => !item.includes('.mp4')).map(item => this.cloudStorage +
						item),
					current: this.cloudStorage + url,
				});
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getFrontDataTableByIdApi({
					id: this.id
				}).then(res => {
					this.info = res
					this.imgList = this.info.files.split(',')
				})
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.complaint-pages {
		padding: 30rpx;

		.info-block {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 30rpx;

			.form-item:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}

			.form-item {
				border-bottom: 1px solid #f5f5ff;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				font-size: 30rpx;

				.form-name {
					margin-bottom: 30rpx;
				}

				.form-crl1 {
					background-color: #f5f6f7;
					padding: 20rpx;
					border-radius: 20rpx;
					font-size: 30rpx;
					line-height: 50rpx;
				}

				.img-block {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.img-item:nth-child(3n) {
						margin-right: 0;
					}

					.img-item {
						width: calc((100% - 40rpx)/3);
						height: 200rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						background: #f5f6f7;
						border-radius: 20rpx;

						.img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>